<template>
	<view class="search" @click="handleSearch(isNavigate,path)">
		<up-search 
			:show-action="false"
			shape="round" 
			placeholder="搜索"
			v-model="content"
			@search="handleSearchDetail"
			></up-search>
	</view>
	<template v-if="searchList && searchList.length && props.show">
		<view class="search-title">
			<span>历史记录</span>
			<view class="title-right">
				<span
					v-if="!isUnfold && !isDelete"
					class="shrink"  
					@click="handleFold"
					>
					展开
					<i class="iconfont icon-xiangxiajiantou"></i>
				</span>
				<span
					v-if="isUnfold && !isDelete"
					class="shrink"
					@click="handleFold">
					  收起
					  <i class="iconfont icon-xiangshangjiantou"></i>
				</span>
				<span
					v-if="isDelete"
					class="shrink"
					@click="handleDeleteAll">
					  全部删除
				</span>
				<i 
					v-if="!isDelete"
					class="iconfont icon-lajixiang"
					@click="handleDelete"></i>
				<span
					v-else
					@click="handleUnDelete">
					  完成
				</span>
			</view>
		</view>
		<view class="search-list">
			<view 
				class="search-item"
				v-for="(item,index) in dataList"
				:key="index"
				@click="handleDeleteOne(isDelete,index)">
				{{item.content}}
				<i 
					v-show="isDelete"
					class="iconfont icon-cuowu1"></i>
			</view>
		</view>
	</template>
	
	
</template>

<script lang="ts" name="" setup>
	import {postSearchCircle} from '../../apis/circle'
	import {postSearchPost} from '../../apis/post'
	import { defineProps,onBeforeMount,reactive,ref } from 'vue'
	const props = defineProps({  
		isNavigate: {
			type: Boolean,
			default: false // 设置默认值  
		},
		path: {
			type: String,
			default: '/' // 设置默认值  
		},
		show:{
			type: Boolean,
			default: false // 设置默认值  
		},
		search:{
			type: String,
			default: '' // 设置默认值  
		},
		
	})
	let content = ref('');
	let isUnfold = ref(false);
	let isDelete = ref(false);
	let searchList = ref([]);
	let dataList = ref([]);
	
	function handleSearch(isNavigate,path){		
		if(isNavigate){
			uni.navigateTo({
				url:path
			})
		}
	}
		
	onBeforeMount(()=>{
		const storedData = uni.getStorageSync(props.search);  
		if (storedData) {  
			searchList.value = JSON.parse(storedData); 
			 dataList.value = searchList.value.slice(0, 4);
		}
		
	})	
	// 搜索帖子
	async function searchPost(){
		// const res = await postSearchCircle(content.value);
	}	
	// 搜索圈子
	async function searchCircle(){
		// const res = await postSearchCircle(content.value);
	}
	function handleSearchDetail(){
		let keyword = content.value.trim()
		if(keyword){
			 // 首先检查关键词是否已经在列表中  
			const existingIndex = searchList.value.findIndex(res => res.content === keyword);   
			// 如果关键词在列表中，则删除它  
			if (existingIndex !== -1) {  
			  searchList.value.splice(existingIndex, 1);  
			}  
			searchList.value.unshift({
				content:content.value
			})
			// 如果是搜索圈子
			if(props.search === 'circle-history'){
				console.log("搜索圈子");
				searchCircle()
			}
			// 如果是搜索帖子
			else if(props.search === 'post-history'){
				console.log("搜索帖子");
				searchPost();
			}
			dataList.value = searchList.value.slice(0, 4);
			uni.setStorageSync(props.search, JSON.stringify(searchList.value));
		}
		else{
			console.log('输入不能为空');
			
		}
		content.value = '';
	}
	// 展开或收起
	function handleFold(){
		isUnfold.value = !isUnfold.value;
		if(isUnfold.value){
			dataList.value = searchList.value;
			// console.log("展开");
		}
		else{
			dataList.value = searchList.value.slice(0, 4);
			// console.log("收起");
		}
	}
	// 删除历史记录
	function handleDelete(){
		// console.log("删除");
		dataList.value = searchList.value;
		isDelete.value = true;
		isUnfold.value = true;
	}
	function handleUnDelete(){
		// console.log("完成");
		dataList.value = searchList.value.slice(0, 4);
		isDelete.value = false;
		isUnfold.value = false;
	}
	// 删除单条历史记录
	function handleDeleteOne(val,index){
		if(val){
			searchList.value.splice(index,1);
			dataList.value = searchList.value;
			uni.setStorageSync(props.search, JSON.stringify(searchList.value));
		}
	}
	// 删除全部历史记录
	function handleDeleteAll(){
		uni.showModal({
			title: '历史记录删除后无法恢复，是否清除全部记录',
			success: function (res) {
				if (res.confirm) {
					console.log('用户点击确定');
					uni.setStorageSync(props.search, '');
					searchList.value = [];
					isDelete.value = false;
					isUnfold.value = false;
				} 
				else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
</script>


<style lang="scss" scoped>
	.search{
		background-color: white;
		padding: 0 30upx;	
		flex: 1;
	}	
	.iconfont{
		font-weight: bold;
		margin-left: 20upx;	
		font-size: 25upx;
	}
	.search-title{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 30upx;
		box-sizing: border-box;
		font-size: 30upx;
		background-color: white;
		.title-right{
			display: flex;
			align-items: center;
			.shrink{
				display: flex;
				align-items: center;
				margin-right: 30upx;
			}
		}
		
	}
	.search-list{
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
		overflow: hidden;
		background-color: white;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: space-between;	
		.search-item{
			width: 47%;
			height: 70upx;
			padding: 10upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 35upx;
		}
	}
</style>